<template>
  <div class="app-container">
    <Title
      :show-btn="false"
      :is-show-back="false"
      name="码日志"
      type="primary"
      icon-class="el-icon-plus"
    />
    <el-form :model="searchData" ref="queryForm" :inline="true">
      <el-form-item label="类别">
        <el-select v-model="searchData.type" placeholder="请选择">
          <el-option
            v-for="(item, index) in codeCategory"
            :key="index"
            :label="item.name"
            :value="item.type"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="应用">
        <el-select v-model="searchData.applicationId" placeholder="请选择">
          <el-option
            v-for="(item, index) in appList"
            :key="index"
            :label="item.applicationName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="关键字" prop="userName">
        <el-input
          v-model="searchData.userName"
          placeholder="请输入姓名、手机号、证件号"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="时间" prop="categoryName">
        <el-date-picker
          v-model="time"
          type="datetimerange"
          @change="datePickerChange"
          :picker-options="pickerOptions"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          style="width: 100%"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="codeLogList">
      <el-table-column label="序号" type="index" width="50"> </el-table-column>
      <el-table-column label="类别" width="90">
        <template slot-scope="scope">
          <span v-if="scope.row.logType == 'SHOW'">亮码</span>
          <span v-else-if="scope.row.logType == 'USE'">用码</span>
          <span v-else>申码</span>
        </template>
      </el-table-column>
      <el-table-column label="码类型" prop="codeType" />
      <el-table-column
        label="姓名"
        width="90"
      >
        <template slot-scope="scope">
          <div>{{ formatName(scope.row.userName) }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="手机号"
        width="120"
      >
        <template slot-scope="scope">
          <!-- 格式化手机号 -->
          <div>{{scope.row.phone ? formatTel(scope.row.phone) : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column label="证件类型" width="90">
        <template slot-scope="scope">
          <div v-if="scope.row.cardType == 1">身份证</div>
          <div v-else>其他</div>
        </template>
      </el-table-column>
      <el-table-column label="证件号">
        <template slot-scope="scope">
          <!-- 格式化证件号 -->
          <div>{{ scope.row.cardNum ? concealText(scope.row.cardNum) : ''}}</div>
        </template>
      </el-table-column>
      <el-table-column label="应用名称" prop="applicationName" />
      <el-table-column label="结果" width="90">
        <template slot-scope="scope">
          <div>{{ scope.row.status == "SUCCESS" ? "成功" : "失败" }}</div>
        </template>
      </el-table-column>
      <el-table-column label="时间" prop="logTime" width="180" />
      <el-table-column
        label="查看"
        width="90"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="lookDetails(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="searchData.page"
      :limit.sync="searchData.pageSize"
      @pagination="getQueryCodeLogList"
    />
    <!-- 添加或修改分类对话框 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="open"
      width="400px"
      append-to-body
    >
      <div>
        {{ detailsText }}
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="cancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Title from "@/components/ShareTitle";
import { queryCodeLogList } from "@/api/codeRunning/codeLog";
import { allAppList } from "@/api/system/application_management";
import formatTel from "../utils/formatTel";
export default {
  name: "codeLog",
  components: { Title },
  data() {
    return {
      loading:false,
      time: "",
      timeData: "",
      pickerOptions: {
        // 点击时，选择的是开始时间，也就是minDate
        onPick: ({ maxDate, minDate }) => {
          console.log(maxDate, minDate, "maxDate, minDate");
          this.timeData = minDate.getTime();
          if (maxDate) {
            // 解除限制
            this.timeData = "";
          }
        },
        disabledDate: (time) => {
          // 是否限制的判断条件
          if (!this.isNull(this.timeData)) {
            var date = new Date(this.timeData); // 只可以选择当月
            // 以下最多可选一个月
            const one = 30 * 24 * 3600 * 1000;  
            const minTime = this.timeData- one;
            const maxTime = this.timeData+ one;
            // 这里就是限制的关键，大于或者小于本月的日期被禁用
            return (
              // date.getMonth() > new Date(time).getMonth() ||
              // date.getMonth() < new Date(time).getMonth()  // 只可以选择当月
              time.getTime() < minTime || time.getTime() > maxTime   // 最多可选一个月
            );
          } else {
            return false;
          }
        },
      },
      appList: [],
      detailsText: "", // 详情
      codeLogList: [],
      codeCategory: [
        {
          name: "全部",
          type: "",
        },
        {
          name: "申码",
          type: "APPLY",
        },
        {
          name: "亮码",
          type: "SHOW",
        },
        {
          name: "用码",
          type: "USE",
        },
      ],
      // 查询参数
      searchData: {
        page: 1,
        pageSize: 10,
        applicationId: "",
        endTime: "",
        startTime: "",
        type: "",
        userName: "",
      },
      title: "",
      open: false,
      total: 0,
      statusOptions: [
        {
          value: 0,
          label: "启用",
        },
        {
          value: 1,
          label: "停用",
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.acquisitionTime();
    this.getAppList();
    this.getQueryCodeLogList();
  },
  methods: {
    acquisitionTime() {
      //获取当前时间
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      var nowDate = year + "-" + month + "-" + day;
      this.time = [`${nowDate} 00:00:00`, `${nowDate} 23:59:59`];
      this.searchData.startTime = this.time[0];
      this.searchData.endTime = this.time[1];
    },
    // 检查是否为空
    isNull(value) {
      if (value) {
        return false;
      }
      return true;
    },
    // 观察时间选择
    datePickerChange(e) {
      if(e){
        this.searchData.startTime = e[0];
        this.searchData.endTime = e[1];
      }else{
        this.searchData.startTime = '';
        this.searchData.endTime = '';
      }
     
    },
    // 查询所有应用
    getAppList() {
      allAppList().then((response) => {
        this.appList = response.data;
        var obj = {
          id: "",
          applicationName: "全部",
        };
        this.appList.unshift(obj);
      });
    },
    // 查询码日志列表
    getQueryCodeLogList() {
      this.loading = true;
      var searchData = JSON.parse(JSON.stringify(this.searchData));
      queryCodeLogList(searchData).then((response) => {
        this.codeLogList = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 格式化手机号
    formatTel(tel) {
      return formatTel(tel);
    },
    // 隐藏数据 (此处是格式化身份证号)
    concealText(value) {
      //   var before = tel.substr(0, 4);   // 截取0下标开始的四位
      var after = value.substr(value.length - 2, 2); // 截取 下标倒数第二位开始的2位
      return `**************${after}`;
    },
    // 姓名格式化
    formatName(str) {
      if (str) {
        return new Array(str.length).join("*")+str.substr(str.length-1, 1) ;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.searchData.page = 1;
      this.getQueryCodeLogList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.searchData = {
        applicationId: "",
        type: "",
        userName: "",
        pageSize:10
      };
      this.acquisitionTime();
      this.handleQuery();
    },
    // 取消按钮
    cancel() {
      this.open = false;
    },
    /** 详情按钮操作 */
    lookDetails(row) {
      if (row.status === "SUCCESS") {
        if (row.logType === "SHOW") {
          this.detailsText = "亮码成功";
        } else if (row.logType === "USE") {
          this.detailsText = "用码成功";
        } else {
          this.detailsText = "申码成功";
        }
      } else {
        this.detailsText = "失败了";  // 失败的原因后面做,暂时没有
      }
      this.open = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding-top: 0px;
}
.el-form--inline {
  margin-top: 20px;
}
.el-form--inline .el-form-item{
  margin-right: 30px;
}
</style>